<template>
  <div class="w-full">
    <a-input-group compact>
      <a-input-number :max='999999999999999' @change="inputVal" style="width:50%" v-model:value="minVal" :placeholder="props.placeholder[0]" />
      <a-input-number :max='999999999999999' @change="inputVal" style="width:50%" v-model:value="maxVal" :placeholder="props.placeholder[1]" />
    </a-input-group>
  </div>
</template>
<script setup>
const emits = defineEmits(['update:valueArr'])
const props = defineProps({
  value: Array,
  placeholder: {
    type: Array,
    default: ['最小', '最大'],
  },
})
const state = reactive({
  minVal: undefined,
  maxVal: undefined,
  valueArr: [],
})

if (props.value && props.value.length) {
  state.value = props.value
  state.minVal = props.value[0]
  state.maxVal = props.value[1]
}

const inputVal = () => {
  state.valueArr = [state.minVal, state.maxVal]
  emits('update:value', state.valueArr)
}
watch(
  () => props.value,
  (newVal, oldVal) => {
    if (newVal === undefined) {
      state.valueArr = []
      state.minVal = undefined
      state.maxVal = undefined
    } else {
      state.valueArr = newVal
      state.minVal = newVal[0]
      state.maxVal = newVal[1]
    }
  },
  { deep: true }
)
defineExpose({})
const { minVal, maxVal } = toRefs(state)
</script>

